<template>
  <!-- 头部 -->
  <view class="head">
    <!-- 搜索 -->
    <view class="searchbox">
      <view class="input" @click="skip('/pages/index-search/index-search')">
        <view class="input-title">
          <img
            src="http://uniqn.zmycode.top/%E6%90%9C%E7%B4%A2%20(1).png"
            alt=""
            class="img"
          />
          搜索
        </view>
      </view>
      <view class="scanthecode" @click="scanthecode">
        <img
          src="http://uniqn.zmycode.top/%E6%89%AB%E7%A0%81.png"
          alt=""
          class="img"
        />
      </view>
    </view>
    <!-- 选项卡 -->
    <view class="options">
      <view
        class="content"
        v-for="(item, index) in optionslist"
        :key="index"
        :class="optionsqiehuan == index ? 'active' : ''"
        @click="optionsqiehuan = index"
      >
        {{ item.title }}
      </view>
    </view>
  </view>
  <!-- 轮播图 -->
  <view class="swiper">
    <u-swiper :list="bannerlist" keyName="image"></u-swiper>
  </view>

  <!-- 金刚区 -->
  <view class="kong">
    <view class="content" v-for="(item, index) in Konglist" :key="index">
      <view class="image">
        <img :src="item.image" alt="" class="img" />
        <view class="kongtitle">
          {{ item.title || item.name }}
        </view>
      </view>
    </view>
  </view>
  <!-- 公告 -->
  <view class="announcement" @click="skip('/pages/announce/announce')">
    <view class="left">
      <img
        src="http://uniqn.zmycode.top/%E5%85%AC%E5%91%8A.png"
        alt=""
        class="img"
        mode="widthFix"
      />
    </view>
    <view class="middle">
      <swiper :circular="true" autoplay style="height: 40rpx">
        <swiper-item>
          <view class="overflow1">
            总有一些风景，是我们的想象，到达不了的地方
          </view> </swiper-item
        ><swiper-item>
          <view class="overflow1">
            总有一些风景，是我们的想象，到达不了的地方
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="right">
      <img
        src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
        alt=""
        class="img"
      />
    </view>
  </view>
  <!-- 3图片 -->
  <view class="threebox">
    <view class="left">
      <view class="titlebig color1"> 我要砍价 </view>
      <view class="titlesmall color2"> 淘到理想好物 </view>
      <img
        src="http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_07.png"
        alt=""
        class="img"
      />
    </view>
    <view class="righttop">
      <view class="titlebig color1"> 团购专区 </view>
      <view class="titlesmall color2"> 发现品质好物 </view>
      <img
        src="http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_03.png"
        alt=""
        class="img"
      />
    </view>
    <view class="rightbottom">
      <view class="titlebig color1"> 限时折扣 </view>
      <view class="titlesmall color2"> 抢到就是赚到 </view>
      <img
        src="http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_10.png"
        alt=""
        class="img"
      />
    </view>
  </view>
  <!-- 商品列表 -->
  <view class="shangpinlist">
    <!-- 品牌图片 -->
    <img
      src="http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_14.png"
      alt=""
      class="img"
    />
    <!-- 新品上市 -->
    <view class="announcement">
      <view class="left">
        <img
          src="http://uniqn.zmycode.top/%E5%85%AC%E5%91%8A.png"
          alt=""
          class="img"
          mode="widthFix"
        />
      </view>
      <view class="middle">
        <swiper :circular="true" autoplay style="height: 40rpx">
          <swiper-item>
            <view class="overflow1">
              总有一些风景，是我们的想象，到达不了的地方
            </view> </swiper-item
          ><swiper-item>
            <view class="overflow1">
              总有一些风景，是我们的想象，到达不了的地方
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <img
          src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
          alt=""
          class="img"
        />
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="productbox">
      <view
        class="product brr4"
        v-for="(item, index) in productlist"
        :key="index"
        @click="skip('/pages/product/product')"
      >
        <image
          :src="item.image || item.mainimage.replace('.avif', '')"
          alt=""
          class="img"
        />
        <view class="title overflow2 font14">
          {{ item.title }}
        </view>
        <view class="jiage">
          <view class="now font16 fcolorf52121"
            >￥{{ item.Currentprice || item.sku.discount }}</view
          >
          <del class="yuan font14 fcolor666"
            >￥{{ item.Originalprice || item.sku.price }}</del
          >
        </view>
        <view class="bottom">
          <view class="left fcolor666 font12 fw600">
            <span class="fcolorf52121">{{ item.people || item.sales }}</span
            >人付款
          </view>
          <view class="right">
            <img
              src="http://uniqn.zmycode.top/%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%A9%BA.png"
              alt=""
              class="img"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { optionslist, bannerlist, Konglist, productlist } from "./index.js";
console.log(bannerlist);
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
const store = useStore();

const optionsqiehuan = ref(0);
const skip = (res) => {
  uni.navigateTo({ url: res });
};

const scanthecode = () => {
  uni.scanCode({
    success: function (res) {
      console.log("条码类型：" + res.scanType);
      console.log("条码内容：" + res.result);
    },
  });
};
onLoad(async () => {
  //banner图
  await store.dispatch("banner");
  bannerlist.value = store.state.bannerlist;
  //金刚区
  await store.dispatch("Kong");
  Konglist.value = store.state.Konglist;

  //商品列表
  await store.dispatch("goodslist");
  productlist.value = store.state.goodslist;
  console.log(store.state.goodslist);
});
</script>

<style lang="scss" scoped>
.head {
  //无导航栏时顶部安全区
  padding-top: var(--status-bar-height);

  width: 100%;
  // border: 1px solid red;
  background-color: #f9436a;

  .searchbox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;

    .input {
      background-color: #fff;
      width: calc(100% - 60rpx);
      height: 50rpx;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .input-title {
        color: #9c9ea3;
        font-size: 30rpx;

        .img {
          width: 30rpx;
          height: 30rpx;
          line-height: 50rpx;
          transform: translateY(20%);
          margin-right: 10rpx;
        }
      }
    }

    .scanthecode {
      .img {
        width: 40rpx;
        height: 40rpx;
        margin: 0 0 0 20rpx;
        transform: translateY(20%);
      }
    }
  }

  .options {
    display: flex;
    padding: 0 20rpx;

    .content {
      margin-bottom: 10rpx;
      width: 20%;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      border-bottom: 2px solid #f9436a;
      padding-bottom: 5rpx;

      &.active {
        border-bottom: 2px solid #fff;
      }
    }
  }
}

.swiper {
  padding: 20rpx;

  background-color: #fff;

  .content {
    box-shadow: 2px 2px 2px #d2d2d2;
  }
}

.kong {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 0 20rpx 20rpx 20rpx;

  .content {
    width: 20%;
    text-align: center;
    position: relative;
    margin-top: 10rpx;

    .image {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50rpx;
        height: 50rpx;
      }

      .kongtitle {
        margin-top: 50rpx;
        font-size: 28rpx;
        color: #545454;
      }
    }
  }
}

.announcement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 20rpx;
  background-color: #fff;
  .left {
    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .middle {
    width: calc(100vw - 120rpx);
    color: #545454;
    font-size: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }
  .right {
    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.threebox {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 20rpx;
  padding: 20rpx;
  background-color: #fff;

  .titlebig {
    margin: 20rpx 0 0 20rpx;
    font-size: 32rpx;
  }

  .titlesmall {
    margin: 0rpx 0 0 20rpx;
    font-size: 24rpx;
  }

  .left {
    // border: 1px solid red;
    grid-row: 1 / span 2;
    background-color: #fee0dd;
    position: relative;
    border-radius: 8rpx;

    .img {
      width: 80%;
      position: absolute;
      bottom: 20rpx;
      left: 50%;
      transform: translateX(-50%);
      height: 180rpx;
    }

    .color1 {
      color: #e15117;
    }

    .color2 {
      color: #f99195;
    }
  }

  .righttop {
    border-radius: 8rpx;
    background-color: #f2e9ff;
    position: relative;
    height: 150rpx;

    .img {
      width: 140rpx;
      // height: 140rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      height: 90rpx;
    }

    .color1 {
      color: #e29ff7;
    }

    .color2 {
      color: #a983dc;
    }
  }

  .rightbottom {
    border-radius: 8rpx;
    background-color: #ffeedc;
    height: 150rpx;
    position: relative;

    .img {
      width: 140rpx;
      // height: 140rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      height: 90rpx;
    }

    .color1 {
      color: #e5483e;
    }

    .color2 {
      color: #f39672;
    }
  }
}

.shangpinlist {
  padding: 0 20rpx 20rpx 20rpx;
  background-color: #fff;
  .img {
    width: 100%;
    height: 200rpx;
  }
  .productbox {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;

    .product {
      width: calc(50% - 20rpx);
      box-shadow: 2px 2px 4px #c9c9c9;
      overflow: hidden;
      margin: 10rpx;

      .img {
        width: 100%;
        height: 300rpx;
        // border: 1px solid red;
      }

      .title {
        margin: 10rpx;
        color: #545454;
      }

      .jiage {
        display: flex;
        justify-content: left;
        align-items: center;
        margin: 10rpx 0 10rpx 10rpx;
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10rpx;

        .right {
          .img {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}
</style>
